<template>
  <div class="prize">
    <header></header>
    <p class="prize-title "><span  :class="{active:btnactive ,slideInRight:btnactive}" @click.passive="changeTab(0)" class="no-select animated ">抽奖奖品</span><span :class="{active:!btnactive,slideInLeft:!btnactive}" @click.passive="changeTab(1)" class="no-select animated">wo!奖品</span></p>
    <p class="table-title"><span>奖品</span><span>中奖时间</span><span class="hidden"></span></p>
  <div class="container" id="lfscroller">
      <ul class="wrapper">
      <!-- <li class="title"><span>奖品</span><span>中奖时间</span><span class="hidden"></span></li> -->
      <li v-if="btnactive" class="animated" :class="{fadeIn:btnactive,fadeOut:!btnactive}" v-for="(items,key) of prizeList" :key="key"><span>{{items.prizeName}}</span><span>{{items.createDateFormate}}</span><span v-showclass="prizeStatus" :status="items.status"  @click.passive="getPrize(items.status,items.prizeId,items.id)"></span></li>
      <li v-if="!btnactive" class="animated" :class="{fadeIn:!btnactive,fadeOut:btnactive}" v-for="(items,key) of rankList" :key="key"><span>{{items.prizeName}}</span><span>{{items.createDateFormate}}</span><span v-showclass="rankStatus" :status="items.status"  @click.passive="getRankPrize(items.status,items.prizeId,items.id)"></span></li>
      <li v-if="prizeList.length==0||rankList.length==0">当前没有更多中奖记录</li>
    </ul>
  </div>
    <p class="prizetab" ><span @click.passive="showRuler()"></span><span @click.passive="toRank"></span></p>
    <!-- 规则 -->
    <x-dialog :show.sync="showDailog" class="dialog-ruler">
        <div class="ruler-box" id="scroller">
          <ul class="wrapper">
            <li class="title">奖品领取规则</li>
            <li>1、参与“WO！女神”活动排名前10的朋友请注意，将在活动结束后的15个工作日内会有江西联通官方微信客服电话联系您，请注意保持手机畅通；</li>
            <li>2、抽奖活动中获得vivo手机的朋友请注意，将在活动结束后的15个工作日内会有江西联通微信公众号官方客服电话联系您，请注意保持电话畅通；</li>
            <li>3、提交信息并通过审核的女神请注意，可在“我的奖品”-“wo!奖品”中查看并领取美团随机红包，红包可在美团或美团外卖最新版客户端下单且选择在线支付时使用，新客首单红包不与其他优惠叠加，使用红包时下单手机号码必须为抢红包时手机号码，如有其他疑问请咨询美团外卖客服；</li>
            <li>4、抽中联通200M流量国内流量的朋友请注意，流量仅可赠送江西联通用户，流量到账后立即生效，月底失效，次月不结转号码状态处于黑名单、欠费停机、停机保号、预付费充值期、锁定期等则无法领取。号码有业务变更未完结、漫游未开、融合业务套餐（智慧沃家、冰激凌不限量或限速套餐）则无法领取。领取流量号码不能为无线上网卡用户；</li>
            <li>5、抽奖中得小茗同学饮品朋友请注意，可直接前往附近校园营业厅兑换领取， 兑换地址可在奖品详情页查看</li>
            <li>6、抽奖中得vivo江西线上商城50减10优惠券、vivo江西线上商城8折优惠券用户，优惠券仅可在支持vivo江西有赞商城购买指定商品使用，在线上付款时自动抵扣，优惠券不可提现，如优惠券有效期已过且发生退款，优惠券金额不退；</li>
            <li>7、抽奖中得vivo江西线上商城50减10优惠券、vivo江西线上商城8折优惠券用户，优惠券仅可在支持vivo江西有赞商城购买指定商品使用，在线上付款时自动抵扣，优惠券不可提现，如优惠券有效期已过且发生退款，优惠券金额不退；</li>
            <li>8、抽中腾讯手机回收现金券的朋友请注意，领取现金券并在有效期内在腾讯微回收平台完成交易（以最终成交时间为准），完成交易后现金券自动生效，无需用户手动使用（现金奖励将与回收款一同分两笔发至微信零钱账户），请在微信卡包-我的票券中查看已领取的优惠券及更详细的使用说明；</li>
            <li>9、抽中同程艺龙优惠券的朋友请注意，请在微信钱包-火车票机票-我的-微信卡券中查看已领取的优惠券及相应的使用说明；</li>
          </ul>
        </div>
        <div @click.passive="showDailog=false">
          <x-icon type="ios-close" size="36"  class="icon-red"></x-icon>
        </div>
    </x-dialog>
    <!-- 小茗同学 -->
    <!-- 腾讯王卡 -->
    <!-- vivo旗舰 -->
    <!-- 滴滴出行 -->
    <!-- 乐豆家/腾讯视频 -->
    <!-- 200M流量 -->
    <PrizePanel v-if="prize.prizemsg" :prize="prize"  @closepanel="closeBtn" class="animated" :class="{bounceIn:!close,none:close}"/>
    <RankPanel  v-if="rankprize" :rankprize="rankprize"  @closepanel="closeBtn" class="animated" :class="{bounceIn:!rankclose,none:rankclose}"/>
  </div>
</template>
<script>
import { XDialog, Popup, XTable, XButton, TransferDomDirective as TransferDom } from "vux";
import PrizePanel from "@/components/com/PrizePanel";
import RankPanel from "@/components/com/RankPanel";
import Qs from "qs";
import {
  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq
} from "@/assets/lib/tool.js";
import "@/assets/style/formreset.css";
import { setTimeout } from "timers";
import { resolve } from "url";
import { rejects } from "assert";
import { wxShare } from "@/assets/lib/wxshare.js";
export default {
  directives: {
    showclass: function (el, binding) {
      // console.log(el.getAttribute('status'))//标签<div v-lang="color">{{num}}</div>
      // console.log(binding)//输出的是一个对象obj
      el.className = binding.value[el.getAttribute("status")].className; //binding.value就是color颜色red。
      el.innerText = binding.value[el.getAttribute("status")].val; //binding.value就是color颜色red。
    },
    TransferDom
  },
  components: { XDialog, PrizePanel, RankPanel, Popup, XTable, XButton },
  data() {
    return {
      btnactive: true,
      showDailog: false,
      showAddress: false,
      prize: "",
      prizeList: [],
      rankprize: '',
      rankList: [],
      xiaomingAddr: [],
      prizeScroller: null,
      close: true,
      rankclose: true,
      prizeMsg: null,
      prizeStatus: [
        {
          type: 0,
          val: "领取",
          className: "rec"
        },
        {
          type: 1,
          val: "已领取",
          className: "unrec"
        },
        {
          type: 2,
          val: "查看",
          className: "rec"
        },
        {
          type: 3,
          val: "受理中",
          className: "unrec"
        },
        {
          type: 4,
          val: "充值失败",
          className: "fail"
        }
      ],
      rankStatus: [
        {
          type: 0,
          val: "待发放",
          className: "rec"
        },
        {
          type: 1,
          val: "已发放",
          className: "unrec"
        },
        {
          type: 2,
          val: "查看",
          className: "rec"
        },
        {
          type: 3,
          val: "领奖须知",
          className: "rec"
        }
      ],
      openid: GetRequest().openid,
      getDrawPrizeListUrl: "/wxjx/goddess/common/prize/getDrawPrizeList",
      getDrawPrizeInfoUrl: "/wxjx/goddess/common/prize/getDrawPrizeInfo", //获取抽奖奖品详情
      getRankPrizeInfoUrl: '/wxjx/goddess/common/prize/getRankPrizeInfo',
      getRankPrizeListUrl: '/wxjx/goddess/common/prize/getRankPrizeList'
      // <!-- 小茗同学 -->--1
      // <!-- 腾讯王卡 -->--2
      // <!-- vivo旗舰 -->--3
      // <!-- 滴滴出行 -->--4
      // <!-- 乐豆家/腾讯视频 -->--5
      // <!-- 200M流量 -->--6
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.getDrawPrizeList();
      setTimeout(() => {
        wxShare();
      }, 500)
    });
  },
  watch: {
    prize(curval, val) {
      if (curval) {
        return curval;
      }
    }
  },
  methods: {
    showAddr() {
      this.showDailog = false;
      this.showAddress = true;
    },
    //领取奖品
    getPrize(status, prizetype, id) {
      // console.log(status, prizetype, id);
      if (1 === status || 3 == status || 4 == status) {
        // this.close = false;
        // this.prize = {
        //   prizetype: prizetype,
        //   prizeid: id,
        //   status: status,
        //   prizemsg: {}
        // };
        return;
      } else {
        new Promise((resolve, reject) => {
          this.$http(getServerHost() + this.getDrawPrizeInfoUrl, {
            params: {
              userPrizeId: id
            }
          }).then(result => {
            result = result.data;
            if ("200" == result.code) {
              resolve(result.res);
            }
          });
        }).then(result => {
          if (result) {
            // console.log(result);
            this.close = false;
            this.prize = {
              prizetype: prizetype,
              prizeid: id,
              status: status,
              prizemsg: result
            };
          }
        });
      }
      // console.log(this.prize);
    },

    //获取抽奖奖品列表
    getDrawPrizeList() {
      var vm = this;
      this.$http(getServerHost() + this.getDrawPrizeListUrl, {
        params: {
          openid: this.openid
        }
      }).then(result => {
        result = result.data;
        // console.log(result);
        if ("200" == result.code) {
          this.prizeList = result.res;
          //展示抽奖列表
          setTimeout(() => {
            vm.prizeScroller = new iScroll("lfscroller", {
              vScroll: true,
              hScroll: false, //水平滚动
              hScrollbar: false,
              checkDOMChanges: true,
              hideScrollbar: true
            });
          }, 100);
        }
      });
    },
    //获取排名奖品列表
    getRankPrizeInfo() {
      var vm = this;
      this.$http(getServerHost() + this.getRankPrizeListUrl, {
        params: {
          openid: this.openid
        }
      }).then(result => {
        result = result.data;
        // console.log(result);
        if ("200" == result.code) {
          this.rankList = result.res;
          vm.prizeScroller.destroy();
          //展示抽奖列表
          setTimeout(() => {
            vm.prizeScroller = new iScroll("lfscroller", {
              vScroll: true,
              hScroll: false, //水平滚动
              hScrollbar: false,
              checkDOMChanges: true,
              hideScrollbar: true
            });
          }, 100);
        }
      });
    },
    //领取排名奖品
    getRankPrize(status, prizetype, id) {
      // console.log(prizetype);
      if (1 == prizetype || 2 == prizetype || 3 == prizetype || 6 == prizetype) {
        this.rankclose = false;
        this.rankprize = {
          prizetype: prizetype,
          prizeid: id,
          status: status,
          prizemsg: {}
        };
        return;
      } else if (4 == prizetype) {
        new Promise((resolve, reject) => {
          this.$http(getServerHost() + this.getRankPrizeInfoUrl, {
            params: {
              userPrizeId: id
            }
          }).then(result => {
            result = result.data;
            if ("200" == result.code) {
              resolve(result.res);
            }
          });
        }).then(result => {
          if (result) {
            // console.log(result);
            location.href = result.linkUrl;
            // this.close = false;
            // this.rankprize = {
            //   prizetype: prizetype,
            //   prizeid: id,
            //   status: status,
            //   prizemsg: result
            // };
          }
        });
      }
      // console.log(this.prize);
    },
    //  展示规则
    showRuler() {
      this.showDailog = true;
      // console.log("22");
      setTimeout(() => {
        new iScroll("scroller", {
          vScroll: true,
          hScroll: false, //水平滚动
          hScrollbar: false,
          checkDOMChanges: true,
          hideScrollbar: true
        });
      }, 100);
    },
    changeTab(index) {
      // console.log(index);
      this.btnactive = Boolean(index) ? false : true;
      Boolean(index) ? this.getRankPrizeInfo() : this.getDrawPrizeList();
    },
    //关闭弹窗
    closeBtn(e) {
      this.close = e;
      this.rankclose = e;
    },
    //返回首页
    toRank() {
      this.$router.push({ path: "/", query: { openid: this.openid } });
    }
  }
};
</script>
<style lang="less" scoped>
.prize {
  width: 100%;
  min-height: 100%;
  background: #fedde1;
  padding-bottom: 30px;
}
header {
  width: 100%;
  height: 334px;
  background: url("../../assets/img/prize-title.png") no-repeat;
  background-size: 100% 100%;
}
.x-red {
  color: rgb(74, 74, 179);
  font-weight: bold;
}
.prize-title {
  margin: 0 auto;
  width: 326px;
  height: 59px;
  line-height: 59px;
  background: #fff;
  border-radius: 30px;
  border: 3px solid #fb6e80;
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    align-items: center;
    width: 50%;
    border-radius: 30px;
  }

  .active {
    background: #fb6e80;
    color: #fff;
  }
}
.table-title {
  display: flex;
  margin: 10px auto;
  width: 602px;
  justify-content: space-around;
  padding: 24px 0 15px 0;
  color: #fb6e80;
  font-weight: bold;
}
.container {
  margin: 10px auto;
  width: 580px;
  height: 529px;
  background: #fff;
  border-radius: 25px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  .wrapper {
    padding: 0 40px 15px;
  }
  .title {
    padding: 24px 0 15px 0;
    color: #fb6e80;
    font-weight: bold;
  }
  .hidden {
    visibility: hidden;
  }
  li {
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin: 20px 0;
    width: 100%;
    span {
      width: 33%;
    }
    .unrec {
      width: 132px;
      height: 43px;
      line-height: 43px;
      border-radius: 5px;
      background: #adadad;
    }
    .rec {
      width: 132px;
      height: 43px;
      line-height: 43px;
      border-radius: 5px;
      background: #ffbd0f;
    }
    .fail {
      width: 132px;
      height: 43px;
      line-height: 43px;
      border-radius: 5px;
      background: #adadad;
    }
  }
}
.prizetab {
  display: flex;
  width: 512px;
  margin: 10px auto;
  align-content: center;
  justify-content: space-around;
  span {
    width: 50%;
  }
  span:nth-child(1) {
    width: 238px;
    height: 68px;
    background: url("../../assets/img/bottom-btn.png") no-repeat;
    background-size: 513px 73px;
  }
  span:nth-child(2) {
    width: 238px;
    height: 68px;
    background: url("../../assets/img/bottom-btn.png") no-repeat -269px 0;
    background-size: 513px 73px;
  }
}
.ruler-box {
  width: 100%;
  background: #fb6e80;
  border: 10px solid #fb6e80;
  border-radius: 15px;
  line-height: 1.5em;
  color: #fff;
  height: 639px;
  padding: 35px;
  /* -- Attention: This line is extremely important in chrome 55+! -- */
  touch-action: none;
  /* -- Attention-- */
  .title {
    font-size: 30px;
    line-height: 1.5em;
    text-align: center;
    font-weight: bold;
  }
  li {
    text-align: left;
  }
}
</style>
